<template>
  <a-modal v-model="visible" :footer="null" :closable="false" dialogClass="loginModal">
    <!-- 第一步 -->
    <template v-if="tabIndex==0">
      <h4 class="titleh4">找回密码</h4>
      <div class="formData">
        <div class="item" style="margin-bottom:24px;">
          <img src="@/assets/image/icon_account.png" alt="">
          <a-input @change="messageerror = ''" v-model="phone" placeholder="请输入手机号码" class="input" />
        </div>
        <div class="item" style="margin-bottom:24px;">
          <img src="@/assets/image/icon_pin.png" alt="">
          <a-input @change="messageerror = ''" placeholder="请输入图形验证码" v-model="imageCodeText" class="input" />
          <a-button class="button" size="large" style="width: 110px;margin-left: 16px;flex: none;letter-spacing: 5px;" @click="onCode()">{{imageCode}}</a-button>
        </div>
        <div class="item" style="margin-bottom:24px;">
          <img src="@/assets/image/icon_code.png" alt="">
          <a-input @change="messageerror = ''" v-model="code" placeholder="请填写短信验证码" class="input" />
          <a-button class="button" type="primary" size="large" style="width: 110px;margin-left:16px;flex: none;overflow:hidden;" @click="getCode">{{djs == '获取验证码'?"获取验证码":djs+"s"}}</a-button>
        </div>
        <div class="item" style="margin-top:32px;">
          <p class="messageerror">{{messageerror}}</p>
          <a-button class="button" type="primary" size="large" :loading="nextloading" @click="nextpage">下一步</a-button>
        </div>
      </div>
    </template>
    <!-- 第二步 -->
    <template v-else-if="tabIndex==1">
      <h4 class="titleh4">设置新密码</h4>
      <div class="formData">
        <div class="item">
          <img src="@/assets/image/icon_password.png" alt="">
          <a-input @change="messageerror = ''" type="password" v-model="password" placeholder="请输入8-14位，字母、数字的组合密码" class="input" />
        </div>
        <div class="item" style="margin-top:24px;">
          <img src="@/assets/image/icon_password.png" alt="">
          <a-input @change="messageerror = ''" type="password" v-model="enterPassword" placeholder="请输入8-14位，字母、数字的组合密码" class="input" />
        </div>
        <div class="item" style="margin-top:32px;">
          <p class="messageerror">{{messageerror}}</p>
          <a-button class="button" type="primary" size="large" :loading="loading" @click="changePassword()">确认</a-button>
        </div>
      </div>
    </template>
    <!-- 第三步 -->
    <template v-else-if="tabIndex==2">
      <div style="font-size: 20px;line-height: 28px;margin-bottom: 8px;">恭喜您！新密码修改成功。</div>
      <div><span class="num"><em>{{num}}</em>秒</span>后将跳转到首页。</div>
      <div>
        <img style="width: 140px;margin: 32px auto 56px;display: block;" src="@/assets/image/RetrievePassword.png" alt="image">
      </div>
      <div class="item" style="margin-top:32px;">
        <a-button class="button" type="primary" size="large" @click="goLogin">去登录</a-button>
      </div>
    </template>
    <!-- 意外 -->
    <template v-else>系统错误</template>
    <div class="backText" @click="visible = false">
      <a-icon type="swap-left" />返回
    </div>
  </a-modal>
</template>

<script>
export default {
  data(){
    return{
      messageerror:"",
      djs:"获取验证码",
      tabIndex: 0,
      visible: false,
      imageCode: '',
      nextloading:false,
      loading:false,
      imageCodeText: '',
      num: 5,
      phone:"", // 手机号
      code:"", // 短信验证码
      password:"", // 密码
      enterPassword:"", // 确认新密码
    }
  },
  methods:{
    goLogin(){
      this.visible = false;
    },
    // 更新验证码
    onCode(){
      this.imageCode = this.$fun.funCode()
    },
    // 验证一段验证码
    isCode(){
      let is = false
      // .toLocaleLowerCase() 忽略大小写验证
      if(this.imageCodeText.toLocaleLowerCase() === this.imageCode.toLocaleLowerCase()){
          is = true
      }else{
          is = false
      }
      return is
    },
    getCode(){
      if(this.djs != '获取验证码'){

      }else if(!this.phone){
        this.messageerror = '请输入手机号';
        // this.$message.error('请输入手机号');
      }else if(!/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(this.phone)){
        this.messageerror = '请输入正确的手机号';
        // this.$message.error('请输入正确的手机号');
      }else if(!this.isCode()){
        this.messageerror = '请检查图形验证码！';
        // this.$message.error('请检查图形验证码！')
      }else{
        this.djs = 60;
        let interval = setInterval(()=>{
          if(this.djs == 1){
            this.djs = '获取验证码';
            clearInterval(interval);
          }else{
            this.djs--;
          }
        },1000)
        // this.loading = true;
        this.$ajax({
          url:"/user/userinfo/sendsms?mobile="+this.phone+"&type=2",
          method:"post",
          params:{}
        }).then((res)=>{
          if(res.code == 200){
            this.$message.success('验证码发送成功，请注意查收！');
          }else{
            this.djs = '获取验证码';
            clearInterval(interval);
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 下一步
    nextpage(){
      if(!this.phone){
        this.messageerror = '请输入手机号';
        // this.$message.error('请输入手机号');
      }else if(!/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(this.phone)){
        this.messageerror = '请输入正确的手机号';
        // this.$message.error('请输入正确的手机号');
      }else if(!this.isCode()){
        this.messageerror = '请输入正确的图形验证码';
        // this.$message.error('请输入正确的图形验证码');
      }else if(!this.code){
        this.messageerror = '请输入验证码';
        // this.$message.error('请输入验证码');
      }else{
        this.nextloading = true;
        this.$ajax({
          url:"/user/userinfo/verifi/smscode?mobile="+this.phone+"&type=2&vfcode="+this.code,
          method:"post"
        }).then((res)=>{
          if(res.code == 200){
            this.tabIndex = 1;
          }else{
            this.nextloading = false;
            this.messageerror = res.msg;
          }
        })
      }
    },
    // 修改密码
    changePassword(){
      if(!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,14}$/.test(this.password)){
        this.messageerror = '密码格式不正确';
        // this.$message.error('密码格式不正确');
      }else if(this.password !== this.enterPassword){
        this.messageerror = '两次密码输入不一致';
        // this.$message.error('两次密码输入不一致');
      }else{
        this.loading = true;
        this.$ajax({
          url:"/user/userinfo/forgot/password?password="+this.password+"&username="+this.phone,
          method:"post"
        }).then((res)=>{
          if(res.code == 200){
            this.tabIndex = 2;
            localStorage.setItem('rememberPassword',false);
            localStorage.setItem('userName','');
            localStorage.setItem('password','');
            // sessionStorage.clear();
            this.$store.commit('changenickName','');
            this.$store.commit('changeresumeNo','');
            this.$store.commit('changepwdFlag','');
            this.$store.commit('changeroleType','');
            this.$store.commit('changemobile','');
            this.$store.commit('changepicture','');
            this.$store.commit('changeToken','');
            this.$store.commit('changeuserName','');
            let interval = setInterval(()=>{
              if(this.num > 1){
                this.num--;
              }else{
                this.$router.push('/')
                this.visible = false;
                this.$emit('closelogin');
                clearInterval(interval)
              }
            },1000)
          }else{
            this.loading = false;
            this.messageerror = res.msg;
          }
        })
      }
      
    }
  },
  created(){
    this.onCode()
  }
}
</script>

<style lang="less" scoped>
/deep/.loginModal{
  top:180px;
  .ant-modal-body{
    padding: 60px;
    padding-bottom: 53px;
  }
  .backText{
    position:absolute;
    left: 20px;
    top: 20px;
    display: flex;
    cursor: pointer;
    color: #333333;
    i{
      font-size: 20px;
      margin-right: 5px;
    }
  }
}
.titleh4{
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 55px;
}
.item{
  position: relative;
  display: flex;
  flex-direction: row;
  >img{
    position: absolute;
    left: 12px;
    z-index: 9;
    width: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
  }
  .messageerror{
    position: absolute;
    left: 0px;
    top: -30px;
    color:#FF3333;
  }
}
.input{
  height: 48px;
  padding-left: 40px;
}
.button{
  height: 48px;
  width: 100%;
}
.num{
  color: @theme;
  em{
    font-size: 24px;
    margin-right: 5px;
  }
}
</style>
